<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>

<body>
    <div id="app">
        {{demo}}
        <!-- v-on: xxx     xxx是事件名称  可以通过 @简写代替
            事件中的函数可以通过（）传参  默认自动会传一个event对象
            如果通过事件传参 但是想使用event 对象时需要 传一个$event 来占位一个event对象
            事件中的方法需要放在 Vue实例中的 methods 属性中

        -->
        <button v-on:click="showinfo($event,66)">点击我打招呼</button>
        <button @click="showinfo1">点击我打招呼1</button>
        </head>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                demo: "demo"
            },
            methods: {
                showinfo(e, num) {
                    console.log(e);
                    console.log(num);
                    alert("同学你好！")
                },
                showinfo1(e) {
                    console.log(e.target.innerText);
                    alert("同学你好1！")
                }
            },
        })
    </script>
</body>

</html>